<!DOCTYPE html>
<html>


	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div {
				width: 1500px;
				height: 800px;
				margin: 0 auto;
				
			}
		</style>
	</head>


	<body>
		<div><canvas id="my canvas" width="1500px" height="800px"></canvas></div>
		<script type="text/javascript">
			var rot = 0;
			var R = 100;
			var xuanzhuanjiaodu = 10;
			var leftx = 400;
			var huchang = xuanzhuanjiaodu * 2 * Math.PI*R / 360;

			
			setInterval(function() {
				var canvas = document.getElementById("my canvas");
				var ctx = canvas.getContext("2d");

				ctx.fillStyle = "yellow";
				ctx.fillStyle="rgba(255,255,0,0.2)";
				ctx.fillRect(0, 0, 1500, 800);
			
				ctx.fill();


				ctx.beginPath();
				ctx.arc(leftx, 400, R, rot / 180 * Math.PI, (1 + rot / 180) * Math.PI);
				ctx.fillStyle = "white";
				ctx.fill();


				ctx.beginPath();
				ctx.arc(leftx, 400, R, (1 + rot / 180) * Math.PI, rot / 180 * Math.PI);
				ctx.fillStyle = "black";
				ctx.fill();


				var y = Math.sin(rot / 180 * Math.PI) * 0.5* R;
				var x = Math.cos(rot / 180 * Math.PI) * 0.5* R;


				ctx.beginPath();
				ctx.arc(leftx - x, 400 - y, 0.5 *R, 0, 2 * Math.PI);
				ctx.fillStyle = "white";
				ctx.fill();


				ctx.beginPath();
				ctx.arc(leftx + x, 400 + y, 0.5 *R, 0, 2 * Math.PI);
				ctx.fillStyle = "black";
				ctx.fill();


				ctx.beginPath();
				ctx.arc(leftx - x, 400 - y, 0.2 *R, 0, 2 * Math.PI);
				ctx.fillStyle = "black";
				ctx.fill();


				ctx.beginPath();
				ctx.arc(leftx + x, 400 + y, 0.2 *R, 0, 2 * Math.PI);
				ctx.fillStyle = "white";
				ctx.fill();
				
				
				ctx.beginPath();
				ctx.arc(leftx-2*R-100, 400, R, rot / 180 * Math.PI, (1 + rot / 180) * Math.PI);
				ctx.fillStyle = "white";
				ctx.fill();


				ctx.beginPath();
				ctx.arc(leftx-2*R-100, 400, R, (1 + rot / 180) * Math.PI, rot / 180 * Math.PI);
				ctx.fillStyle = "black";
				ctx.fill();


				ctx.beginPath();
				ctx.arc(leftx - x-2*R-100, 400 - y, 0.5 *R, 0, 2 * Math.PI);
				ctx.fillStyle = "white";
				ctx.fill();


				ctx.beginPath();
				ctx.arc(leftx + x-2*R-100, 400 + y, 0.5 *R, 0, 2 * Math.PI);
				ctx.fillStyle = "black";
				ctx.fill();


				ctx.beginPath();
				ctx.arc(leftx - x-2*R-100, 400 - y, 0.2 *R, 0, 2 * Math.PI);
				ctx.fillStyle = "black";
				ctx.fill();


				ctx.beginPath();
				ctx.arc(leftx + x-2*R-100, 400 + y, 0.2 *R, 0, 2 * Math.PI);
				ctx.fillStyle = "white";
				ctx.fill();
				rot = rot + xuanzhuanjiaodu;
				leftx = leftx + huchang;


				if(leftx > 1500-R-huchang || leftx < 3*R+100) {
					huchang=-huchang;
					xuanzhuanjiaodu = -xuanzhuanjiaodu;
				}
			}, 100);
		</script>
	</body>


</html>